<template>
  <div class="budgetSetting">
    <!-- 顶部 -->
    <div class="main-t">
      <!-- 导航栏 -->
      <div class="banner">
        <van-nav-bar>
          <template #left>
            <van-icon name="arrow-left" color="black" @click="back" />
          </template>
          <template #title>
            1月预算
          </template>
        </van-nav-bar>
      </div>
    </div>
    <!-- 中部 -->
    <div class="main-c">
      <!-- 预算信息 -->
      <div class="budget-default panel">
        <div class="budget-title-box">
          <div class="budget-title">
            <div class="panel-title-icon"></div>
            <div>预算信息</div>
          </div>
          <div class="budget-setting" @click="totalBudgetShow = true">设置</div>
        </div>
        <div class="budget-details">
          <div class="budget-details-text">
            <div class="budget-details-tag">剩余月预算（元）</div>
            <div class="budget-details-content">928.25</div>
          </div>
          <div class="budget-details-chart" ref="chartContainer"></div>
        </div>
        <div class="budget-info">
          <div class="budget-info-item">
            <div class="budget-info-tag">本月消费</div>
            <div class="budget-info-text">￥71.75</div>
          </div>
          <div class="budget-info-item">
            <div class="budget-info-tag">月预算</div>
            <div class="budget-info-text">￥1000</div>
          </div>
          <div class="budget-info-item">
            <div class="budget-info-tag">预算剩余</div>
            <div class="budget-info-text">92.83%</div>
          </div>
          <div class="budget-info-item">
            <div class="budget-info-tag">剩余天数</div>
            <div class="budget-info-text">剩8天</div>
          </div>
        </div>
        <div class="budget---br"></div>
        <div class="budget-conclusion">
          <div class="budget-conclusion-item">
            <div class="budget-conclusion-item-title">
              <div class="budget-conclusion-item-title-icon"></div>
              <div class="budget-conclusion-item-title-text">本月日均消费</div>
            </div>
            <div class="budget-conclusion-item-text">￥2.99</div>
          </div>
          <div class="budget-conclusion-item">
            <div class="budget-conclusion-item-title">
              <div class="budget-conclusion-item-title-icon"></div>
              <div class="budget-conclusion-item-title-text">日均预算</div>
            </div>
            <div class="budget-conclusion-item-text">￥32.26</div>
          </div>
          <div class="budget-conclusion-item">
            <div class="budget-conclusion-item-title">
              <div class="budget-conclusion-item-title-icon"></div>
              <div class="budget-conclusion-item-title-text">剩余每日可消费金额</div>
            </div>
            <div class="budget-conclusion-item-text">￥116.03</div>
          </div>
        </div>
      </div>
      <!-- 分类预算 -->
      <div class="budget-category panel">
        <div class="budget-title-box">
          <div class="budget-title">
            <div class="panel-title-icon"></div>
            <div>分类预算</div>
          </div>
          <div class="budget-setting" @click="budgetCategoryShow = true">添加</div>
        </div>
        <div class="budget-category-list">
          <Nothing :tag="`没有发现分类预算哦，试着添加一个~`" />
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="main-b">
      <!-- 总预算设置 -->
      <van-popup v-model:show="totalBudgetShow" position="bottom">
        <div class="setting-popup">
          <div class="title">总预算设置</div>
          <div class="budget-box">
            <div class="budget-input-box">
              <div class="input-title">总预算金额</div>
              <div class="budget-input">
                <van-cell-group inset class="group">
                  <van-field v-model="totalBudgetVal" placeholder="总预算金额" maxlength="8" type="number" clearable
                    clear-trigger="always"></van-field>
                </van-cell-group>
              </div>
            </div>
            <div class="budget-tag">设置为0即可取消预算设置</div>
            <div class="budget-saveBtn">
              <div class="fixedBtn">保存</div>
            </div>
          </div>
        </div>
      </van-popup>
      <!-- 分类预算设置 -->
      <van-popup v-model:show="budgetCategoryShow" position="bottom">
        <div class="setting-popup">
          <div class="title">分类预算设置</div>
          <div class="budget-box">
            <div class="budget-input-box">
              <div class="input-title">分类</div>
              <div class="budget-input">
                <van-cell-group inset class="group">
                  <van-field v-model="budgetCategoryVal" placeholder="请输入分类" type="text" readonly>
                    <template #extra>
                      <div class="category-icon" @click="mainCategoryListShow = true">
                        <van-image :src="img_01" height="30" width="30"></van-image>
                      </div>
                    </template>
                  </van-field>
                </van-cell-group>
              </div>
            </div>
            <div class="budget-input-box">
              <div class="input-title">预算金额</div>
              <div class="budget-input">
                <van-cell-group inset class="group">
                  <van-field v-model="budgetCategoryMoneyVal" placeholder="预算金额" maxlength="8" type="number" clearable
                    clear-trigger="always"></van-field>
                </van-cell-group>
              </div>
            </div>
            <div class="budget-saveBtn">
              <div class="fixedBtn">保存</div>
            </div>
          </div>
        </div>
      </van-popup>
      <!-- 主分类列表 -->
      <van-popup v-model:show="mainCategoryListShow" position="bottom">
        <div class="setting-popup">
          <div class="budget-box">
            <div class="budgetCategory-list">
              <div class="budgetCategory-item budgetCategory---item" v-for="(mcCategory, index) in categoryListA"
                :key="mcCategory.id" @click="changeCategory(mcCategory)">
                <div class="category-icon">
                  <van-image :src="mcCategory.icon"></van-image>
                </div>
                <div class="category-text">{{ mcCategory.text }}</div>
              </div>
            </div>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script setup lang="ts" name="BudgetSetting">
// 预算设置页面
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import Nothing from '@/components/Nothing.vue'
import useCategory from '@/hooks/useCategory'
import type { Category } from '@/hooks/useCategory'

import img_01 from '@/icon/067_分类.svg'

// 导入echarts用于生成图表
import * as echarts from 'echarts';

const router = useRouter()
let { categoryListA } = useCategory()

// 图表数据
const chartContainer = ref(null);
onMounted(() => {
  const myChart = echarts.init(chartContainer.value, null, {
  })
  const option = {
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        data: [
          {
            value: 1048, name: 'Search Engine', itemStyle: {
              color: 'rgb(181, 202, 161)'
            }
          },
          {
            value: 735, name: 'Direct', itemStyle: {
              color: 'rgba(241,241,241)'
            }
          }
        ]
      }
    ]
  }
  myChart.setOption(option);
})

// 返回上一层
function back() {
  router.go(-1)
}

let totalBudgetMoney = ref(0) // 总预算金额

let totalBudgetVal = computed({  // 总预算 金额 格式化
  get() {
    return totalBudgetMoney.value.toFixed(2)
  },
  set(value) {
    totalBudgetMoney.value = parseFloat(value)
  }
})

let totalBudgetShow = ref(false) // 总预算设置弹出层
let budgetCategoryShow = ref(false) // 分类预算设置弹出层
let mainCategoryListShow = ref(false) // 主分类列表弹出层

let budgetCategoryVal = ref('') // 分类预算名称
let budgetCategoryMoney = ref(0) // 分类预算金额
let budgetCategoryMoneyVal = computed({  // 分类预算 金额 格式化
  get() {
    return budgetCategoryMoney.value.toFixed(2)
  },
  set(value) {
    budgetCategoryMoney.value = parseFloat(value)
  }
})

function changeCategory(category: Category) {
  mainCategoryListShow.value = false // 选中类别后关闭列表
  budgetCategoryVal.value = category.text // 设置分类预算名称
  console.log(category)
}

</script>

<style scoped lang="less">
@gabelMargin : 20px; // 全局margin
@gabelBgColor : rgb(181, 202, 161);
@garyFontColor : rgb(125, 125, 125);
@grayBgColor: rgb(240, 240, 240);

.main-c {
  margin: @gabelMargin;
  font-size: 30px;

  .budget-title-box {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .budget-title {
      display: flex;
      align-items: center;
    }

    .budget-setting {
      font-size: 25px;
      background-color: rgb(243, 221, 184);
      padding: 10px 15px;
      border-radius: 50px;
    }
  }

  .budget-category-list {
    height: 40vh;
  }

  .budget-default {
    .budget-details {
      margin-top: 30px;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .budget-details-text {
        .budget-details-tag {
          color: rgb(55, 55, 55);
        }

        .budget-details-content {
          font-size: 60px;
          font-weight: 600;
        }
      }

      .budget-details-chart {
        width: 200px;
        height: 200px;
      }
    }

    .budget-info {
      display: flex;
      justify-content: space-between;

      .budget-info-item {
        .budget-info-tag {
          color: @garyFontColor;
        }

        .budget-info-text {
          font-weight: 600;
        }
      }
    }

    .budget---br {
      margin: 20px 0;
      border: 1px dashed rgb(203, 203, 203);
    }

    .budget-conclusion {
      .budget-conclusion-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 10px 0;

        .budget-conclusion-item-title {
          display: flex;
          align-items: center;

          .budget-conclusion-item-title-icon {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            margin-right: 20px;
          }
        }

        .budget-conclusion-item-text {
          font-weight: 600;
        }
      }

      .budget-conclusion-item:first-child .budget-conclusion-item-title-icon {
        background: linear-gradient(45deg, #fff, orange);
      }

      .budget-conclusion-item:nth-child(2) .budget-conclusion-item-title-icon {
        background: linear-gradient(45deg, #fff, rgb(29, 0, 253));
      }

      .budget-conclusion-item:last-child .budget-conclusion-item-title-icon {
        background: linear-gradient(45deg, #fff, rgb(0, 128, 255));
      }
    }
  }
}

.setting-popup {
  padding: 20px;
  font-size: 35px;

  .title {
    font-size: 40px;
    font-weight: 600;
    text-align: center;
  }

  .budget-box {
    .budget-input-box {
      position: relative;

      .input-title {
        position: absolute;
        z-index: 1;
        font-size: 30px;
        top: -22px;
        left: 60px;
        color: @garyFontColor;
      }

      .budget-input {
        width: 100%;
        display: flex;
        margin-top: 30px;

        .group {
          width: 100%;
          border-radius: 100px;
        }

        .van-cell {
          align-items: center;
          background-color: rgb(241, 241, 241);
        }

        .category-icon {
          display: flex;
          align-items: center;
        }
      }
    }

    .budget-tag {
      font-size: 25px;
      margin: 10px 30px;
      color: @garyFontColor;
    }

    .budget-saveBtn {
      margin-bottom: 120px;
    }

    .budgetCategory-list {
      height: 50vh;
      overflow: scroll;

      .budgetCategory-item {
        margin: 25px 0;
        padding: 25px 0;
        display: flex;
        align-items: center;

        .category-icon {
          margin-right: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          padding: 15px;
          background-color: @grayBgColor;
        }
      }

      .budgetCategory---item {
        border-bottom: 1px solid rgb(210, 210, 210);
      }

      .budgetCategory---item:last-child {
        border: none;
      }
    }
  }

}
</style>